<script>
import SmallCard from "./components/SmallCard.vue";
import StatiscalCard from "./components/StatiscalCard.vue";
import ThridCard from "./components/ThridCard.vue";
import FooterCard from "./components/FooterCard.vue";
import { ShowReportData } from "./api/reportdata";

export default {
  name: "App",
  components: {
    SmallCard,
    StatiscalCard,
    ThridCard,
    FooterCard,
  },
  data() {
    return {
      reportData: [],
    };
  },
  mounted() {
    this.getReportData()

  },
  methods: {
    async getReportData() {
      const response = await ShowReportData();
      this.reportData = response
    },
  },

};

</script>

<template>
  <div>
    <div class="first-line">
      <div v-for="item in reportData" class="card">
        <small-card :data="item"></small-card>
      </div>
    </div>
    <div class="second-line">
      <statiscal-card ></statiscal-card>
    </div>
    <div class="third-line">
      <thrid-card></thrid-card>
    </div>
    <div class="footer-line">
      <footer-card></footer-card>
    </div>
  </div>
</template>

<style scoped>
.first-line {
  display: flex;
  
}

.card {
  display: flex;
  width: 25%;
  margin: 10px;
}
.second-line,.third-line,.first-line,.footer-line {
  margin-top: 20px;
}


</style>
